import React from "react";
import * as Icon from "@ant-design/icons";
import { Layout, Menu } from "antd";
import { useNavigate } from "react-router-dom";
import MenuConfig from "../../config";

const { Sider } = Layout;

//处理菜单数据
const items = MenuConfig.map((item) => {
  const child = {
    key: item.path,
    icon: React.createElement(Icon[item.icon]),
    label: item.label,
  };
  if (item.children) {
    child.children = item.children.map((child) => {
      return {
        key: child.path,
        label: child.label,
      };
    });
  }
  return child;
});

const CommonAsider = ({ Collapsed }) => {
  const navigate = useNavigate();

  // 菜单点击跳转
  const handleMenuClick = ({ key }) => {
    navigate(key);
  };

  return (
    <Sider trigger={null} collapsed={Collapsed}>
      <h3 className="app-name">{Collapsed ? '后台' : '通用后台管理系统'}</h3>
      <Menu
        style={{ height: "100%" }}
        theme="dark"
        mode="inline"
        defaultSelectedKeys={["/home"]}
        items={items}
        onClick={handleMenuClick}
      />
    </Sider>
  );
};

export default CommonAsider;